<template>
  <view>
    <u-subsection :list="list" fontSize="18" :current="curNow" @change="sectionChange"></u-subsection>
   <view class="activity" >
     <view class="item"  v-for="item in activitylist" :key="item.id">
       <view class="badget">
         <u-tag text="进行中" size="mini" v-if="item.state"></u-tag>
         <u-tag text="已结束" size="mini" type="warning" v-else></u-tag>
       </view>
       <!-- 活动的展示图 -->
       <view class="img">
         <view class="activity-text">
           {{item.title}}
         </view>
       </view>
       <!-- 活动的时间 -->
       <view class="text">
         <span>{{item.time}}</span>
       </view>
     </view>
   </view> 
      
    </view>
</template>

<script>
  import {mapState} from 'vuex'
  export default {
    data() {
      return {
        list: ['全部', '受理中', '进行中','已完成'],
        				// 或者如下，也可以配置keyName参数修改对象键名
        				// list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],
        				curNow: 0,
        // 用来存放活动数据的数组
        activitylist:[],
        
      };
    },
    computed:{
      ...mapState('m_activityorder',['listOrder'])
    },
    onLoad(){
      // this.activitylist=this.listOrder
      this.getAll()
    },
    methods:{
      	sectionChange(index) {
      				this.curNow = index;
              if(index===0){
                this.getAll()
              }else{
                if(index===1){
                  this.getLoading()
                }else{
                  if(index===2){
                    // this.activitylist=[]
                    this.getGoing()
                  }else{
                    if(index===3){
                      this.activitylist=[]
                    }
                  }
                }
              }
      			},
            // 所有活动
        async  getAll(){
          // this.activitylist=this.listOrder
          // // console.log(this.activitylist)
          const {data:res} = await uni.$http.get('/reservation/all/9')
          this.activitylist=res.data
          // console.log(res)
        },
        // 获取处理中的数据
        async  getLoading(){
          const {data:res} = await uni.$http.get('/reservation/9/1')
          console.log(res)
          if(res.code !== 200 ) return this.$showMsg("数据获取异常")
          this.activitylist= res.data
        },
        // 活动进行中
        async getGoing(){
          const {data:res} = await uni.$http.get('/reservation/9/2')
          if(res.code !== 200) return this.$showMsg("数据获取异常")
          this.activitylist= res.data
        }
    }
  }
</script>

<style lang="scss">
  
  .activity{
    display: flex;
    flex-wrap: wrap;
    margin-top: 5px;
   .item{
     position: relative;
     margin: 5px;
     width: calc(46%);
     height: 100px;
     border: 1px;
     box-shadow: 1px 1px 1px 1px gray;
     display: flex;
     flex-direction: column;
     .img{
       width: 100%;
       height: 80%;
       // 背景
       background-image: url('https://img-qn.51miz.com/preview/element/00/01/05/28/E-1052800-57BA7D89.jpg');
       background-size: cover;
       display: flex;
       justify-content: center;
       align-items: center;
     .img-item{
      width: 100%;
      height: 100%;
      display: block;
      }
      .activity-text{
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
         padding: 0 10px;
        font-weight:700;
        color: white;
      }
     }
     .text{
       width: 100%;
       font-size: 12px;
       display: flex;
       justify-content: center;
       align-items: center;
       background-color: lightcyan;
     }
   }
   .badget{
     position: absolute;
     top: 0;
     left: 0;
   }
  }
  .middle{
    
  }
</style>
